//修改上课时间

import React, { useState,useEffect } from 'react';
import { Layout, Form, Input, Button, DatePicker,Card,Table,Spin } from 'antd';
import dayjs from 'dayjs';
import { submitApliInfoAPI } from '@/api/student';
import { getAppliAPI } from '@/api/admin';
import { getUserId } from '@/utils/userId';
import { getPerAppliAPI } from '@/api/student';
import './index.scss'

const { Header, Content, Footer } = Layout;
const stateMap = {
  '-1': '未审核',
  '0': '已过初审',
  '1': '审核未通过',
  '2': '审核已通过',
}

const ChangeSchedule = () => {
  const [form] = Form.useForm();
  const [submitted, setSubmitted] = useState(false);
  const [loading, setLoading] = useState(false);
  const onFinish = (values) => {
    console.log('Received values:', values);
    // 转换为Dayjs对象
   const oldDate = dayjs(values.Schedule.$d);
   const newDate = dayjs(values.newSchedule.$d);
   // 格式化日期
    const date = oldDate.format('YYYY-MM-DD');
    const hopeDate = newDate.format('YYYY-MM-DD');
    console.log(date); // 输出: 2024-04-20
    console.log(hopeDate);
    setSubmitted(true);
    const data={}
    submitApliInfoAPI({
      ...data,
      studentId:getUserId(),
        phone:values.phone,
      coachId:values.coachId,
      subject:values.course,
      name:values.name,
      reason:values.reason,
      date:date,
      hopeDate:hopeDate,
      appState:-1
    })
  };

  const handleReturn = () => {
    setSubmitted(false);
    form.resetFields();
  };

  //存储申请列表
  const [appliList,setAppliList] = useState(
    [
     {
       studentId:'',
       name: '',
       phone:'',
       subject: '',
       reason: '',
       date: '',
       hopeDate:'',
       appState:-1,
     }
    ]
   )
  useEffect(async() =>{
    const res =await  getPerAppliAPI(getUserId())
    console.log("申请：",res)

     // 解析后端返回的数据，并去除"data"层包裹
  //  const parsedData = res.data.filter(item => item.appState === 0)

   // 将后端数据转换为与初始状态相同结构（移除React组件）
  //  const appStateText = stateMap[res.data.map(item =>item.appState)] || '未知状态';
   const formattedData = res.data.map(item => ({
     studentId:item.studentId,
     name: item.name,
     phone: item.phone,
     subject: item.subject,
     reason: item.reason,
     date: item.date,
     hopeDate: item.hopeDate,
     appState:(stateMap[item.appState] || '未知状态')
   }))
   setAppliList(formattedData)
},[])

  return (
    <Layout>
      <Header style={{ color: 'white' }}>学员上课时间修改申请</Header>
      <Content style={{ position:'relative',top:'10px',  padding: '10 50px' }}>
          <div>
          {submitted ? (
            <Card>
              <div>
              <h1 style={{position:'relative',left:'40%'}}>申请提交成功！</h1>
              <p style={{position:'relative',left:'39%'}}>您的上课时间修改申请已成功提交。</p>
              <Button onClick={handleReturn} style={{position:'relative',left:'44%'}}>返回</Button>
            </div>
            </Card>

          ) :
            (
              <div>
                <Card>
                <Form form={form} layout="vertical" initialValues={{}} onFinish={onFinish}>
                <Form.Item
                  label="学员姓名"
                  name="name"
                  rules={[{ required: true, message: '请输入学员姓名' }]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="联系电话"
                  name="phone"
                  rules={[{ required: true, message: '请输入联系电话' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号' }]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="调课科目编号(科目一:s1、科目二:s2、科目三:s3、科目四:s4)"
                  name="course"
                  rules={[{ required: true, message: '请输入调课编号' }]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="调课原因"
                  name="reason"
                  rules={[{ required: true, message: '请输入调课原因' }]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  label="教练编号"
                  name="coachId"
                  rules={[{ required: true, message: '请输入教练编号' }]}
                >
                  <Input />
                </Form.Item>

                <Form.Item
                  label="原上课时间"
                  name="Schedule"
                  rules={[{ required: true, message: '请选择原上课时间' }]}
                >
                  <DatePicker />
                </Form.Item>
                <Form.Item
                  label="新的上课时间"
                  name="newSchedule"
                  rules={[{ required: true, message: '请选择新的上课时间' }]}
                >
                  <DatePicker />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" htmlType="submit">提交申请</Button>
                </Form.Item>

              </Form>
              </Card>

              <Card style={{position:'relative',top:'20px'}}>
              <Spin spinning={loading}>
              <h3>历史申请记录</h3>
          <Table
            dataSource={appliList}
            rowKey="studentId"
            pagination={{ pageSize: 10 }}
            columns={[
              { title: '学员学号', dataIndex: 'studentId' },
              { title: '学员姓名', dataIndex: 'name' },
              { title: '联系电话', dataIndex: 'phone' },
              { title: '调课科目', dataIndex: 'subject' },
              { title: '调课原因', dataIndex: 'reason' },
              { title: '原上课时间', dataIndex: 'date' },
              { title: '期望上课时间', dataIndex: 'hopeDate' },
              { title: '状态', dataIndex: 'appState' }
            ]}
          />
        </Spin>
              </Card>

                </div>

             )
          }
        </div>
        <Card className='Logo1'>
        <div style={{position:'relative',top:'5px',left:'580px'}}>驾校管理系统&copy;2024-2099</div>
        </Card>

      </Content>
    </Layout>
  );
};

export default ChangeSchedule;
